<template>
  <div>
    <el-input v-model="studentId" style="width: 15rem" placeholder="学号" />
    <el-input v-model="name" style="width: 15rem" placeholder="姓名" />
    <el-input v-model="phone" style="width: 15rem" placeholder="电话" />
    <el-input v-model="photo" style="width: 15rem" placeholder="照片" />
    <el-button :plain="true" @click="ok">提交</el-button>
  </div>
  <el-table :data="info" style="width: 100%">
    <el-table-column label="studentId" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.studentId }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="phone" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div v-for="(item, index) in info" style="display: flex" class="id">
    <div>
      {{ item.studentId }}
    </div>
    <div>
      {{ item.name }}
    </div>
    <div>
      {{ item.phone }}
    </div>
    <el-button link type="primary" size="small" @click="deletes(index)">
      Detail
    </el-button>
  </div>
  <button @click="tiaio">跳转</button>
  <input type="file" webkitdirectory multiple />
  <about :pName="aa" />
  <div id="main" style="width: 800px; height: 600px"></div>
  <div>{{ counterStore.count }}</div>
  <button @click="counterStore.increment">+</button>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import about from "./AboutView.vue";
import * as echarts from "echarts";
import { Timer } from "@element-plus/icons-vue";
import { useCounterStore } from "../stores/counter.js";
const counterStore = useCounterStore();

interface User {
  studentId: string;
  name: string;
  phone: string;
}
const router = useRouter();
const aa = "小李";
const studentId = ref("");
const name = ref("");
const phone = ref("");
const photo = ref("");
const info: User[] = ref([]);
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  info.value.splice(index, 1);
  console.log(index, row);
};

function ok() {
  if (studentId.value != "" && name.value != "" && phone.value != "") {
    info.value.push({
      studentId: studentId.value,
      name: name.value,
      phone: phone.value,
      photo: photo.value,
    });
    studentId.value = "";
    name.value = "";
    phone.value = "";
    photo.value = "";
  } else {
    console.log(9999);
    ElMessage({
      message: "请把信息填写完整",
      type: "error",
      plain: true,
      duration: "1000",
    });
  }
  console.log(info.value);
}
function deletes(index) {
  info.value.splice(index, 1);
}
function tiaio() {
  router.push("/about");
}
function time() {
  // console.log(`${123}${1223}`);
}
const fn1 = (param: string): void => {
  console.log("给我传的值必须是字符哟");
  console.log("我是没有返回值的箭头函数");
};
function fn2(param: string): void {
  console.log("给我传的值必须是字符哟");
  console.log("我是没有返回值的函数");
}

let fn3 = (x: number, y: number): number => {
  console.log("给我传的值必须是数字哟");
  console.log("我的返回值的也是数字哟");
  return console.log(x + y);
};
let arr2: Array<number> = [5, 6, 7, 8];
//数组定义后，数组内的数据类型必须和定义数组的时候的类型是一致的，否则会有错误提示，某些情况下不会编译通过。

let arr3: Array<number> = [true, "HAHA"]; //报错
console.log(arr2);

// 图表
function fn() {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      data: [
        "Direct",
        "Marketing",
        "Search Engine",
        "Email",
        "Union Ads",
        "Video Ads",
        "Baidu",
        "Google",
        "Bing",
        "Others",
      ],
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        selectedMode: "single",
        radius: [0, "30%"],
        label: {
          position: "inner",
          fontSize: 14,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1548, name: "Search Engine" },
          { value: 775, name: "Direct" },
          { value: 679, name: "Marketing", selected: true },
        ],
      },
      {
        name: "Access From",
        type: "pie",
        radius: ["45%", "60%"],
        labelLine: {
          length: 30,
        },
        label: {
          formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
          backgroundColor: "#F6F8FC",
          borderColor: "#8C8D8E",
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: "#6E7079",
              lineHeight: 22,
              align: "center",
            },
            hr: {
              borderColor: "#8C8D8E",
              width: "100%",
              borderWidth: 1,
              height: 0,
            },
            b: {
              color: "#4C5058",
              fontSize: 14,
              fontWeight: "bold",
              lineHeight: 33,
            },
            per: {
              color: "#fff",
              backgroundColor: "#4C5058",
              padding: [3, 4],
              borderRadius: 4,
            },
          },
        },
        data: [
          { value: 1048, name: "Baidu" },
          { value: 335, name: "Direct" },
          { value: 310, name: "Email" },
          { value: 251, name: "Google" },
          { value: 234, name: "Union Ads" },
          { value: 147, name: "Bing" },
          { value: 135, name: "Video Ads" },
          { value: 200, name: "Others" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}

onMounted(() => {
  time();
  counterStore.fn();
});
</script>
<style>
.id div {
  margin: 1.25rem;
}
</style>
